<div class="flex items-center">
  <%= form_with url:, method: do %>
    <%= tag.button role: "switch", "aria-checked": activated?, "aria-labelledby": "toggle-label", class: ["relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2", "bg-green-600": activated?, "bg-gray-200": !activated?] do %>
      <%= tag.span "aria-hidden": true, class: ["pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out", "translate-x-5": activated?, "translate-x-0": !activated?] %>
    <% end %>
  <% end %>

  <span class="ml-3" id="toggle-label">
    <span class="text-sm font-medium text-gray-900"><%= title %></span>
  </span>
</div>
